<template>
  <div>
    <el-form label-width="130" ref="formRef" :model="state.form" :rules="formRules">
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="审核：" prop="type">
            <el-radio-group v-model="state.form.type" @change="change">
              <el-radio value="1" size="large">审核通过</el-radio>
              <el-radio value="2" size="large">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="失败原因：" prop="reason" v-if="state.form.type == 2">
            <el-input type="textarea" maxlength="200" :rows="6" show-word-limit v-model="state.form.reason"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center" style="margin: 20px 0">
      <el-button @click="submitForm" type="primary">提交审核</el-button>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance, nextTick, watch, onBeforeUnmount } from "vue";
const state = reactive({
  form: {
    type: "1",
    reason: ""
  }
});

const change = e => {
  if (e == 2) {
    console.log(e);
    formRules.reason = [{ required: true, message: "请输入失败原因", trigger: "blur" }];
  } else {
    formRules.reason = null;
    state.form.reason = "";
  }
};

// #region 表单校验
// 校验规则及参数
const formRef = ref();
const formRules = reactive({
  type: [{ required: true, message: "请选择", trigger: "change" }],
  reason: null
});

// 校验方法
const validateForm = async () => {
  try {
    await formRef.value.validate(); // 校验多个表单
    // await FamilyRule.value.validate();
    // await SkillRule.value.validate();
    // await StudyRule.value.validate();
    // await InsureRule.value.validate();
    // await HonorRule.value.validate();
    // await HealthRule.value.validate();
    // await TrainRule.value.validate();
    return true; // 校验通过
  } catch (error) {
    console.log(error);
    return false; // 校验失败
  }
};

// 提交表单
const activityEnter = () => {
  console.log(state.form);
};

// 提交校验
const submitForm = async () => {
  const isValid = await validateForm();
  if (isValid) {
    // 表单校验通过，执行提交操作
    console.log("表单校验成功");
    activityEnter();
  } else {
    // 表单校验失败，显示错误信息
    console.log("表单校验失败");
  }
};
// #endregion
</script>

<style lang="scss" scoped></style>
